import {
  computed,
  getCurrentInstance,
  reactive,
  readonly,
  watchEffect,
} from "vue";
import { isEqual } from 'lodash-es';
import type { UnwrapRef } from "vue";
export function useRuleFormItem<T extends Recordable>(
  props: T,
  key: keyof T = "value"
) {
  const instance = getCurrentInstance();
  const emit = instance?.emit;
  console.log(emit);
  const innerState = reactive({
    value: props[key],
  });
  const defaultState = readonly(innerState);
  const setState = (val: UnwrapRef<T[keyof T]>): void => {
    innerState.value = val as T[keyof T];
  };

  watchEffect(() => {
    innerState.value = props[key];
  });

  const state = computed({
    get() {
      return innerState.value;
    },
    set(value) {
      if (isEqual(value, defaultState.value)) return;
      innerState.value = value as T[keyof T];
    },
  });
  return [state, setState, defaultState];
}
